﻿<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
   <style>
   .bear{
      width:200px;
      height:200px;
      margin:auto;
	  border-radius:50%;
	  position:relative;
	  top:100px;
   }
   .head{
	  width:200px;
      height:200px;
	  background-color:Gray;
	   border-radius:50%;
       position:absolute;
	 }
	 .ear_left,.ear_right{
	  width:65px;
	  height:65px;
	  border-radius:50%;
	  overflow:hidden;
	  background-color:Gray;
	 }
	 .ear_left{
	   position:absolute;
	   top:-10px;
	   left:-10px;
	    
	 }
	 .ear_right{
	   position:absolute;
	   top:-10px;
	   right:-10px;
	 }
	 .ear_left_1,.ear_right_1{
	   width:60px;
	   height:60px;
	   border-radius:50%;
	   background-color:black;
	   opacity:0.7;
	 }
	 .ear_left_1{
	   position:absolute;
	   left:10px;
	   top:10px;
	  
	 }
	 .ear_right_1{
	   position:absolute;
	   right:10px;
	   top:10px;
	    
	 }
	 .eye_left,.eye_right{
	   width:50px;
	   height:35px;
	   border:solid 1px Bisque;
	   background-color:Cornsilk; 
	   border-radius:50%;
	   overflow:hidden;
	 } 
	 .eye_left{
	   position:absolute;
	   top:55px;
	   left:20px;
	 }
	 .eye_right{
	   position:absolute;
	   top:55px;
	   right:20px;
	 }
	 .eye_1,.eye_2{
	   width:30px;
	   height:30px;
	   background-color:black;
	   border-radius:50%;
	   position:absolute;
	   left:10px;
	   top:2px;
	 }
	 .eyes_1{
	    width:10px;
		height:10px;
		background-color:white;
		border-radius:50%;
		position:absolute;
		left:1px;
		top:5px;
	 }
	 .eyes_2,.eyes_3{
	    width:4px;
		height:4px;
		background-color:white;
		border-radius:50%;
	 }
	 .eyes_2{
	    position:absolute;
		left:12px;
		top:8px;
	 }
	 .eyes_3{
	    position:absolute;
		left:9px;
		top:17px;
	 }
	 .nose{
	   width:60px;
	   height:60px;
	   background-color:black;
	   opacity:0.8;
	   border-radius:50%;
	   position:absolute;
	   left:70px;
	   top:85px;
	 }
	 .nose_1{
	   width:13px;
	   height:13px;
	   background-color:Gray;
	   border-radius:50%;
	   position:absolute;
	   left:5px;
	   top:23px;
	 }
	 .nose_1_1{
	   width:6px;
	   height:6px;
	   background-color:white;
	   border-radius:50%;
	   position:absolute;
       left:1px;
	   top:2px;
	 }
	 .mouth{
	    width:90px;
		height:40px;
		background-color:black;
		opacity:0.8;
		border-radius:50% 50% 50% 50%;
		overflow:hidden;
		position:absolute;
		left:55px;
		top:150px;
	 }
	 .tongue{
	    width:60px;
		height:60px;
		background-color:Coral;
		border-radius:50%;
		position:absolute;
		left:15px;
		top:10px;
	 }
	  @keyframes showeye{
	   0%{
	     margin-top:0px;
	      height:35px;
	   }
	   100%{
	   margin-top:2px;
	    height:31px;
	   }
	}
	  @keyframes bete{
	   0%{
	     margin-top:0px;
	      height:40px;
	   }
	   100%{
	   margin-top:8px;
	    height:24px;
	   }
	}
    .eye_left,.eye_right{
	  animation:showeye 0.6s linear infinite alternate;
	}
	.mouth{
	  animation:bete 0.15s linear infinite alternate;
	}
   </style>
 </head>
 <body>
  <div class="bear">
   <div class="ear_left">
	     <div class="ear_left_1"></div>
   </div>
   <div class="ear_right">
	     <div class="ear_right_1"></div>
   </div>
   <div class="head">
	  <div class="eye_left">
	     <div class="eye_1">
		    <div class="eyes_1"></div>
			<div class="eyes_2"></div>
			<div class="eyes_3"></div>
		 </div>
	  </div>
	  <div class="eye_right"> 
	     <div class="eye_2">
		    <div class="eyes_1"></div>
			<div class="eyes_2"></div>
			<div class="eyes_3"></div>
		 </div>
	  </div>
	  <div class="nose">
	     <div class="nose_1">
		    <div class="nose_1_1"></div>
		 </div>
	  </div>
	  <div class="mouth">
	     <div class="tongue"></div>
	  </div>
   <div>
  </div>
 </body>
</html>
